import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import installElementPlus from '../plugins/element';

// createApp(App).use(store).use(router).mount('#app')
const app = createApp(App);
// // 按需加在ant design vue
// installAntDesignVue(app);
// // 按需加在iconFont idons
// installIconFontIcon(app);
installElementPlus(app);
app.use(store).use(router).mount('#app');

// 展示服务器环境
console.log('main.js >>> 环境配置名称：', process.env.NODE_ENV);
console.log('main.js >>> 环境配置服务器地址：', process.env.VUE_APP_SERVER);
// console.log('axion 默认的 baseURL=', axios.defaults.baseURL);

const hasRoute = (to: any) => {
  const find = router.getRoutes().find(item => item.path === to.path);
  return !!find;
};

const addRoute = () => {
  // const routeLocal = store.state.routes;
  const _originalMenus: any = JSON.parse(<string>window.sessionStorage.getItem('ORIGINAL_MENUS'));
  const _routeIdMap: any = [];
  // // 1. 安全起见，先将所有的 route数据保存成 map{key=id, value=route}的格式
  // routeLocal.forEach((item: any) => {
  //   _routeIdMap[item.id] = item;
  // })
  _originalMenus.forEach((item: any) => {
    // 如果routeLocal获取的数据是按照id排序的，也就是父级id都在前面，子id都在后面，则不用先执行第1步，可以在一个循环里直接做了
    _routeIdMap[item.id] = item;
    // 格式化route
    const formattedRoute = {
      path: item.path,
      name: item.name,
      meta: {
        id: item.id,
        url: item.url,
        iconCls: item.iconCls,
        keepAlive: item.keepAlive,
        requireAuth: item.requireAuth,
        isParent: item.isParent,
        menuParentId: item.menuParentId,
        routerParentId: item.routerParentId
      },
      component: () => {
        const _itemPath = item.path;
        const _componentStr = item.component;
        const _componentPath = _itemPath.split('/')[1];
        // console.log('    ...... itme.Path = ', _itemPath);
        // console.log('    ...... _componentPath = ', _componentPath);
        if (_componentStr.startsWith('Home')) {
          console.log('menu.ts >>> initMenus >> 当前to的route的名字 = ', _componentStr, '[ path=', _itemPath, ']');
          return import('./views/' + _componentStr + '.vue');
        } else {
          console.log('menu.ts >>> initMenus >> 当前to的route的名字 = ', _componentStr, '[ path=', _itemPath, ']');
          return import('./views/' + _componentPath + '/' + _componentStr + '.vue');
        }
      }
    };

    // 2.2 把格式化后的route加入到"router/index.ts"中
    if (item.routerParentId) {
      // item的routerParentId存在，表示需要插入到路由中去；item的routerParentId为空的，表示这只是一个菜单的包裹项
      if (item.routerParentId === '0') {
        // router.addRoute(formattedRoute);
        router.addRoute('首页', formattedRoute);
        // console.log('    ...... menu.ts >>> initMenu >> initUserMenuAndRoutes方法当前加入', item.component, '后，router中的routes=', router.getRoutes());
      } else {
        router.addRoute(_routeIdMap[item.routerParentId].name, formattedRoute);
        // console.log('    ...... menu.ts >>> initMenu >> initUserMenuAndRoutes方法当前加入', item.component, '后，router中的routes=', router.getRoutes());
      }
    }
  });
};

// 路由守卫：在每一个页面上动态加载菜单
router.beforeEach(async (to, from, next) => {
  console.log('main.ts >>> router路由守卫 >> 查看store中的routes = ', store.state.original_menus);
  console.log('main.js >>> router路由守卫 >> 路径跳转：', from.path, ' ===> ', to.path);
  // console.log('main.ts >>> router路由守卫 >> 查看window.sessionStorage中的user = ', window.sessionStorage.getItem('LOGIN_USER'));
  // if (!hasRoute(to)) {
  //   addRoute();
  //   next(to.fullPath);
  // } else {
  //   next();
  // }
  next();
});
